import React, { Component } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Card,
  Row,
  Col,
  Select,
  Cascader,
} from 'antd';

import '@ant-design/compatible/assets/index.css';
import { CompanyListParams } from '../data';

const { Option } = Select;
const { Item } = Form;

interface BatchIndexProps extends FormComponentProps {
  dispatch?: Dispatch;
  INITINFO?: any;
  changeCompany: (batch: number, type: number) => void;
}

interface BatchIndexState {
  searchValues: CompanyListParams;
  companyID: number;
  type: number;
}

@connect(({
  cooperationCompanyBatch: { detailInfo },
  common: { INITINFO },
}: any) => ({ detailInfo, INITINFO }))

class BatchIndexElem extends Component<BatchIndexProps, BatchIndexState> {
  state: BatchIndexState = {
    searchValues: {
      pcId: 4,
      type: 1,
      pareaCode: '',
      careaCode: '',
      dareaCode: '',
    },
    companyID: 4,
    type: 1,
  }

  componentDidMount() {
    this.fetchAction('common/fetchAddressList');
  }

  handleChangePC = (companyID: number) => {
    const { searchValues } = this.state;
    const { changeCompany } = this.props;
    changeCompany(companyID, searchValues.type);
    const params = { ...searchValues, pcId: companyID };

    this.setState({ companyID, searchValues: params }, () => {
      if (params.type && params.dareaCode && params.pcId) {
        this.fetchAction('fetch', params);
      }
    });

    if (companyID === 6) {
      const { form: { resetFields } } = this.props;
      resetFields(['type']);
      this.setState({ type: 1 });
      changeCompany(companyID, 1);
    }
  }

  handleSearch = (type: number, e: any) => {
    const { companyID, searchValues } = this.state;

    const params = {
      ...searchValues,
      type: type === 1 ? e : searchValues.type,
      pareaCode: type === 2 ? e[0] : searchValues.pareaCode,
      careaCode: type === 2 ? e[1] : searchValues.careaCode,
      dareaCode: type === 2 ? e[2] : searchValues.dareaCode,
    };

    this.setState({ searchValues: params }, () => {
      const { changeCompany } = this.props;
      changeCompany(companyID, type === 1 ? e : searchValues.type);
      if (params.type && params.pcId) {
        this.fetchAction('fetch', params);
      }
    });
  }

  fetchAction = (typeName: string, payload: any = {}) => {
    const { dispatch }: any = this.props;
    const type = typeName.indexOf('common') >= 0
      ? typeName : `cooperationCompanyBatch/${typeName}`;
    dispatch({ type, payload });
  }

  render() {
    const { companyID, type } = this.state;
    const {
      form: { getFieldDecorator },
      INITINFO: { addressList },
    } = this.props;

    return (
      <Card bordered={false} className="marginB20">
        <Form hideRequiredMark className="tableListForm">
          <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
            <Col md={8} sm={24}>
              <Item label="快递公司">
                {getFieldDecorator('name', ({
                  initialValue: companyID,
                  rules: [{ required: true, message: '请选择快递公司' }],
                }))(
                  <Select placeholder="请选择" onChange={this.handleChangePC}>
                    <Option value={4}>申通快递</Option>
                    <Option value={8}>中通快递</Option>
                    <Option value={5}>韵达快递</Option>
                    <Option value={2}>圆通快递</Option>
                    <Option value={78}>极兔快递</Option>
                  </Select>,
                )}
              </Item>
            </Col>
            <Col md={8} sm={24}>
              <Item label="　　类型">
                {getFieldDecorator('type', ({
                  initialValue: type,
                  rules: [{ required: true, message: '请选择类型' }],
                }))(
                  <Select
                    placeholder="请选择"
                    onChange={(e) => this.handleSearch(1, e)}
                  >
                    <Option value={1}>物流中心</Option>
                    <Option
                      disabled={companyID === 6}
                      value={3}
                    >小区
                    </Option>
                  </Select>,
                )}
              </Item>
            </Col>
            <Col md={8} sm={24}>
              <Item label="　　区域">
                {getFieldDecorator('area', ({
                  rules: [{ required: true, message: '请选择区域' }],
                }))(
                  <Cascader
                    changeOnSelect
                    options={addressList}
                    placeholder="请选择"
                    onChange={(e) => this.handleSearch(2, e)}
                  />,
                )}
              </Item>
            </Col>
          </Row>
        </Form>
      </Card>
    );
  }
}

export default Form.create<BatchIndexProps>()(BatchIndexElem);
